﻿/**********************************************************
*-----------------------------------*
* flareJ JavaScript Library
*-----------------------------------*
* 作者:Joe_Sky
* 邮箱:hitomi_doax@tom.com
* 最后更新时间:2011-8-18
*-----*-----*-----*-----*-----*-----*
* 基于jQuery
***********************************************************/

/*----------------------------------------------*
* flareJ.AutoComplete
*-------*-------*-------*-------*-------*-------*
* 自动提示控件
*-------*-------*-------*-------*-------*-------*
* (必须)flareJ.Base.js
*----------------------------------------------*/
(function ($) {
    var FJ = $.flareJ, flareJ = FJ;

    /************************************************************
    *-----------------------------------------------------------*
    *                       自动提示控件
    *-----------------------------------------------------------*
    *************************************************************
    *-----*-----*-----*-----*-----*-----*-----*-----*-----*-----*
    * 由史文星的jquery.complete.js修改而成
    *-----*-----*-----*-----*-----*-----*-----*-----*-----*-----*
    * 调用方法:$("#textbox").ACJ();
    ************************************************************/
    this.AutoCompleteJ = this.ACJ = FJ.AutoCompleteJ = FJ.ACJ = FJ.CJ.extend({
        //#region 构造方法
        init: function (elemObj, settings) {
            //参数
            this._super(elemObj, $.extend(true, {
                fjType: "ACJ",
                renderTo: "body",
                widthF: elemObj.width(),
                heightF: "auto",
                borderWidth: 1,
                shiftWidth: 4,                             //选项列表宽度补正值
                shiftTop: 7,                               //选项列表上方偏移值
                inputPName: "txtValue",
                delaySpeed: 300,                           //执行每次查询的延迟时间
                maxHeight: 200,                            //最大高度
                url: FJ.getRootPath() + "/flareJ.Java/WebRoot/JsLibrary/flareJ/utility/flareJ_DatabaseTest.ashx",  //后台获取数据页面url
                urlData: {
                    type: "TestAC"
                },
                colorParams: {
                    borderOut: "#C6C6C6",
                    bgColor: "#fff"                     //背景色
                }
            }, settings));

            this.input = elemObj;
            this.input.attr("autocomplete", "off");  //关闭文本框默认的提示

            this.initFn();

            return this;
        },
        //#endregion

        //#region 初始化
        initFn: function () {
            this._super();
            this.create();
            this.bindKeyUp();
        },
        //#endregion

        //#region 构建
        create: function () {
            this._super();
            var thiz = this;

            //外层
            this.divOut.addClass("acj").attr("id", "ACJ_" + this.objId).css({
                width: this.p.widthF + this.p.shiftWidth,
                position: "absolute",
                maxHeight: this.p.maxHeight
            });

            //选项列表容器
            this.acjUl = $("<ul></ul>").addClass("acj_ul");

            //加载
            this.divOut.append(this.acjUl);

            return this;
        },
        //#endregion

        //#region 显示
        show: function () {
            var offSet = this.input.offset();
            this.divOut.css({
                width: this.input.width() + this.p.shiftWidth + "px",
                left: offSet.left + "px",
                top: offSet.top + this.input.height() + this.p.shiftTop + "px"
            });
            this.divOut.show();

            if (FJ.isIE6) {  //设置IE6最大高度
                if (this.divOut[0].scrollHeight > 100) {
                    this.divOut.css({ "height": this.p.maxHeight });
                }
                else {
                    this.divOut.css({ "height": this.p.heightF });
                }
            }
        },
        //#endregion

        //#region 绑定键盘事件
        bindKeyUp: function () {
            var thiz = this;
            this.input.bind("keyup", function (e) {
                thiz.KeyUpFn(e);
            }).bind("blur", function (e) {
                thiz.clearPopup();
            });
        },
        //#endregion

        //#region 键盘事件方法
        KeyUpFn: function (e) {
            var thiz = this;

            switch (FJ.fixE(e).key) {
                case 13:  //回车
                    this.input.val(this.acjUl.find("li.acj_li_mouseOver").text());
                    this.clearPopup();
                    break;
                case 27:  //ESC
                    this.clearPopup();
                    break;
                case 38:  //上方向键
                    var oLiM = this.acjUl.find("li.acj_li_mouseOver");
                    if (oLiM.length > 0) {
                        oLiM.removeClass("acj_li_mouseOver").prev().addClass("acj_li_mouseOver");
                        this.input.val(this.acjUl.find("li.acj_li_mouseOver").text());
                    }
                    break;
                case 40:  //下方向键
                    if (!this.divOut.is(":hidden")) {
                        var oLi = this.acjUl.find("li");
                        var oLiM = this.acjUl.find("li.acj_li_mouseOver");
                        if (oLiM.length > 0) {
                            oLiM.removeClass("acj_li_mouseOver").next().addClass("acj_li_mouseOver");
                        }
                        else {
                            oLi.eq(0).addClass("acj_li_mouseOver");
                        }
                        this.input.val(this.acjUl.find("li.acj_li_mouseOver").text());
                    }
                    break;
                default:  //查询数据
                    if (this.delay)  //每次查询数据时延迟一定时间
                        clearTimeout(this.delay);

                    this.delay = setTimeout(function () {
                        thiz.update();
                    }, this.p.delaySpeed);
                    break;
            }
        },
        //#endregion

        //#region 更新选项列表
        update: function () {
            var thiz = this;
            //this.p.urlData[this.p.inputPName] = this.input.val();

            //更新列表
            this.fire("update", { input: this.input.val() });
        },
        //#endregion

        //#region 更新选项列表完毕
        updateComplete: function (data) {
            if (data.length > 0) {
                this.clearPopup();

                for (var i = 0; i < data.length; i++) {
                    this.acjUl.append("<li><span>" + data[i] + "</span></li>");
                    this.acjUl.find("li").bind("mousedown", function () {
                        this.input.val($(this).text());
                        this.clearPopup();
                    }).hover(function () {
                        this.acjUl.find("li.acj_li_mouseOver").removeClass("acj_li_mouseOver");
                        $(this).addClass("acj_li_mouseOver");
                    }, function () {
                        $(this).removeClass("acj_li_mouseOver");
                    });
                }

                this.show();
            }
            else {
                this.clearPopup();
            }
        },
        //#endregion

        //#region 清除提示内容
        clearPopup: function () {
            this.acjUl.empty();
            this.divOut.hide();
        }
        //#endregion
    });

    //#region 绑定到jquery
    $.fn.extend({
        AutoCompleteJ: function (settings) {
            return new FJ.AutoCompleteJ(this, settings);
        },
        ACJ: function (settings) {
            return $(this).AutoCompleteJ(settings);
        }
    });
    //#endregion

    //#region 加载css
    $("head").append('<link id="AutoCompleteJStyle" href="' + FJ.cssPath + 'flareJ.AutoComplete.css" rel="stylesheet" type="text/css" />');
    //#endregion

})(jQuery);